<template>
	<view class="shq">
		<view class="banler">
			<view class="banler_top">
				<view class="location">
					<image class="location_icon" src="../../static/images/shq_location.png"></image>
					<text class="location_title">瑞安市</text>
					<image class="location_more" src="../../static/images/shq_dsj.png"></image>
				</view>
				<view class="search" @click="search()">
					<image class="search_icon" src="../../static/images/shq_search.png"></image>
					<text>咪购</text>
					<!-- <input placeholder="咪购"/> -->
				</view>
			</view>
			<view class="lb">
				<swiper :indicator-dots="false" :autoplay="true" :interval="3000" :duration="1000">
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/images/topic_bg.jpg"></image>
						</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item">
							<image src="../../static/images/topic_bg.jpg"></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		
		<!--分类菜单-->
		<!-- <uni-swiper-dot :mode="mode" :current="current" :info="memuList" :dots-styles="dotsStyles">
			<swiper class="swiper-box" 
			@change="bindchange" 
			@transition="bindtransition"
			@animationfinish="binanimationfinish"
			:autoplay="false" 
			:interval="3000" 
			:duration="1000"
			:style="'height:'+(isChangeSwiper ? newHeight : active == '0' ? 100 : 300) + 'px'"
			>
				<swiper-item v-for="(item ,index) in memuList" :key="index">
					<view  class="swiper-item2" :id="'nav'+index">
						<view class="category_item" v-for="(categoryItem ,categorIndex) in item" :key="categorIndex">
							<image :src="categoryItem.image"></image>
							<text>{{categoryItem.text}}</text>
						</view>
					</view>
				</swiper-item>
			</swiper>
		</uni-swiper-dot> -->
		
		
		<view class="category_menu" :style="'height:'+((isChangeSwiper ? newHeight : current == '0' ? navHeigh0 : navHeigh1)+50) + 'px'">
			<uni-swiper-dot :mode="mode" :current="current" :info="info" :dots-styles="dotsStyles">
				<swiper class="swiper-box" 
				@change="bindchange"
				@transition="bindtransition"
				@animationfinish="binanimationfinish"
				:autoplay="false" 
				:interval="3000" 
				:duration="1000"
				:style="'height:'+((isChangeSwiper ? newHeight : current == '0' ? navHeigh0 : navHeigh1)+25) + 'px'"
				>
					<swiper-item v-for="(item ,index) in info" :key="index">
						<view :id="'nav'+index" class="swiper-item2" :style="{height: (Math.ceil((item.length / 5)) * 100) + 'px'}">
							<view class="category_item" v-for="(categoryItem ,categorIndex) in item" :key="categorIndex">
								<image :src="categoryItem.image"></image>
								<text>{{categoryItem.text}}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</uni-swiper-dot>
		</view>
		<!--blaner图-->
		<view class="activity">
			<image src="../../static/images/shq_blaner.jpg"></image>
		</view>
		<view class="contentBox" :class="{'contentBoxfixed':conetntBoxFixed == true}" >
			<view id="fixed" :class="{'viewfixed':viewfixed == true}" style="margin-bottom: 10px;">
				<view class="tabsView">
					<shqTabes 
					:tabs="tabs" 
					:active="tabsActive" 
					:distance="25"
					@custom-event="updateTabsActiveData"
				></shqTabes>
				</view>
				<view v-if="tabsActive === 0">
					<HM-filterDropdown :filterData="filterData" :defaultSelected ="filterDropdownValue" @confirm="confirm"></HM-filterDropdown>
				</view>
			</view>
			<view 
				class="content" 
				id="content" 
				:class="{'contentFixed0':viewfixed == true && tabsActive == 0,'contentFixed1':viewfixed == true && tabsActive == 1}"
				:style="'min-height:' + minHeight + 'px'"
			>
					<view v-if="tabsActive == 0">
						<storeItem></storeItem>
					</view>
					<view v-if="tabsActive == 1" style="display: flex; justify-content: center; height: 600px;">
						<tips notice="暂时没有您要找的团购商品"></tips>
					</view>
			
			</view>
		</view>
		<customTab :newData="newData" :activeRouter="activeRouter"></customTab>
	</view>
</template>

<script>
	import data from './data.js'; //筛选菜单数据
	import customTab from '@/components/customTab';
	import storeItem from '@/pages/shenghuoquan/components/store.vue';
	import shqTabes from '@/pages/shenghuoquan/components/shq_tabs.vue';
	import tips from '@/pages/shenghuoquan/components/tips.vue';
	import { getNavigation } from '@/api/public.js';
	import { mapGetters } from "vuex";
	import { HTTP_REQUEST_URL } from '@/config/app';
	import { storeMerchantList, getGeocoder ,getProductslist, getProductHot, storeCategory } from '@/api/store.js';
	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
	import { getDiy } from '@/api/api.js';
	//引入生活圈接口
	import {getMenuList,getCategoryList} from '@/api/shenghuoquan.js';
	// import goodList from './goodList';
	export default {
		components:{
			customTab,
			shqTabes,
			storeItem,
			tips
		},
		data() {
			return {
				tabs:[{id:1,a:2},{id:2,a:1}],
				swiperHeight:200,
				activeRouter:'',
				newData:{},
				info:[
					
				],
				mode:'round',
				current:0,
				dotsStyles:{
					width:'9px',
					height:'9px',
					backgroundColor: 'rgba(235,239,238)',
					border: '1px rgba(235,239,238) solid',
					color: '#fff',
					selectedBackgroundColor: '#e02020',
					selectedBorder: '1px #e02020 solid'
				},
				number:5,
				// active:0,
				navHeigh:[],
				navHeigh0:0,
				navHeigh1:0,
				newHeight:0,
				isChangeSwiper:false,
				tabsActive:0,
				
				filterDropdownValue: [
				],
				filterData: [],
				conetntBoxFixed:false,
				viewfixed:false,
				oldFiler:[],
				minHeight:[
					
				]
			}
		},
		watch:{
			//监听
			// filterData(newValue,oldValue){
				// console.log(1)
				// console.log(newValue,oldValue)
			// }
		},
		created(){
			let routes = getCurrentPages(); //获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route; //获取当前页面路由
			this.activeRouter = '/' + curRoute;
		},
		mounted(){
			this.getCategory();
			this.getNav();
			this.getMenu();
			this.getMinHeight(1);
		},
		onShow(){
			// this.getNav();
			// this.getMenu();
			
		},
		onLoad() {
			
		},
		onPageScroll(e)
		{
			const query = uni.createSelectorQuery().in(this);
			query.select("#content").boundingClientRect((data)=>{
				if(data.top < 300){
					this.conetntBoxFixed = true;
				}else{
					this.conetntBoxFixed = false;
				}
				if(this.tabsActive == 0){
					if(data.top <= 176 )
					{
						this.viewfixed = true;
					}else{
						this.viewfixed = false;
					}
				}else{
					if(data.top <= 130.5 )
					{
						this.viewfixed = true;
					}else{
						this.viewfixed = false;
					}
				}
				
			}).exec();
		},
		methods: {
			getMinHeight(type){
				// 获取可视区域的高度
				const windowHeight = uni.getSystemInfoSync().windowHeight;
				// console.log(windowHeight);
				if(this.tabsActive == 0){
					this.minHeight = type == 1 ? (windowHeight - 175) : (windowHeight - 125);
				}else{
					this.minHeight = type == 1 ? (windowHeight - 111) : (windowHeight - 61);
				}
			},
			confirm(e){
				let filer = e;
				if(this.oldFiler.length != 0)
				{
					filer.value.forEach((item,index)=>{
						if(index == 1 || index == 2){
							if(item[0]!= this.oldFiler.value.index){
								if(index == 1){
									filer.index[2] = [null];
									filer.value[2] = [null];
								}else if(index == 2){
									filer.index[1] = [null];
									filer.value[1] = [null];
								}
							}
						}
					})
					// this.filterDropdownValue = filer.value;
				}
				
				this.oldFiler = filer;
			},
			getCategory(){
				getCategoryList().then(res =>{
					let hierarchyColumn = data[0].submenu.concat(this.infinitusClassification(res.data));
					data[0].submenu = hierarchyColumn;
					this.filterData = data;
				})
			},
			//无限极分类
			infinitusClassification(category)
			{
				let data = [];
				category.forEach((item)=>{
					let categoryData = {
						'name':item.category_name,
						'value':item.merchant_category_id
					}
					if(Array.isArray(item.children)){
						categoryData.submenu = this.infinitusClassification(item.children)
					}
					data.push(categoryData);
				})
				return data;
			},
			search()
			{
				uni.navigateTo({
					url:'/pages/other/shenghuoquan/search'
				})
			},
			getNav(){
				getNavigation().then(res =>{
					
					this.newData = res.data
					if(this.newData.stauts && this.newData.stauts.stauts)
					{
						uni.hideTabBar();
					}else{
						uni.showTabBar();
					}
				})
			},
			getSwiperCount(){
				this.$nextTick(()=>{
					this.menuHeight();
				})
			},
			getMenu()
			{
				getMenuList().then(res =>{
					let menuList = [];
					let recommendMenuList = [];
					res.data.list.forEach((item)=>{
						let data = {
							'image':item.pic,
							'text':item.name,
							'url':item.url
						}
						menuList.push(data);
						if(item.is_recommend == 1){
							recommendMenuList.push(data);
						}
					});
					this.info[0] = recommendMenuList;
					this.info[1] = menuList;
					this.getSwiperCount();
				})
				
			},
			menuHeight(){
				this.info.forEach((item,index)=>{
					this.navHeigh[index] = Math.ceil(item.length / this.number) * 100;
				});
				this.navHeigh0 = Math.ceil(this.info[0].length / this.number)* 100;
				this.navHeigh1 = Math.ceil(this.info[1].length / this.number)* 100;
			},
			bindchange(e)
			{
				this.current = e.detail.current;
			},
			/**滑动过程逐渐增加高度核心*/
			bindtransition(e)
			{
				const per = e.detail.dx / window.innerWidth;
				const newHeight = (this.navHeigh1 - this.navHeigh0) * per;
				if(this.current == 0)
				{
					if(per > 0){
						this.newHeight = this.navHeigh0 + newHeight;
					}else{
						this.newHeight = this.navHeigh0;
					}
				}else if(this.current == 1)
				{
					if(per > 0){
						this.newHeight = this.navHeigh1;
					}else{
						this.newHeight = this.navHeigh1 + newHeight;
					}
				}
				this.isChangeSwiper = true;
			},
			binanimationfinish()
			{
				this.isChangeSwiper = false;
			},
			updateTabsActiveData(newData) {
				this.tabsActive = newData;
				this.getMinHeight();
				// uni.createSelectorQuery().select("#content")
				// .boundingClientRect((res) => {
					
				// 	console.log(res.top)
				// 	uni.pageScrollTo({
				// 		scrollTop: (res.top -175),
				// 		duration:800,
				// 	})
				// }).exec()
			  // let top = 0;
			  // if(this.tabsActive == 0){
				 //  top = -176;
			  // }else{
				 //  top = -130.5;
			  // }
			  // this.elementTopStyle.transform = 'translateY('+top+'px)';
			  // this.tableClick = true;
			  // console.log(newData);
			}
		}
	}
</script>

<style>
.banler{width: 100%; height: 496rpx; background-color: #fc5461;}
.banler_top{width: 100%; height: 105rpx; background-color: #fc5461; z-index: 999; display: flex; align-items: center; position: fixed; top: 0rpx;}
.location{width: auto; height: 79rpx; display: flex; align-items: center; margin-left: 2%;}
.location_icon{width: 49rpx; height: 49rpx; float: left;}
.location_title{width: auto; height:53rpx; padding-right:10rpx; line-height: 53rpx; font-size: 32rpx; font-weight: 350; color:#ffffff;}
.location_more{width: 20rpx; height: 20rpx;}
.search{flex: 1; height: 43px; background-color: #ffffff; display: flex; align-items: center; margin-right:5%; margin-left: 2%; border-radius: 20rpx;}
.search_icon{width: 35rpx; height: 35rpx; margin:0px 10rpx 0px 27rpx}
.search text{color: #969696;}
.lb{width: 94%; height: 280rpx; margin-left: 3%; float: left; margin-top: 114rpx; border-radius: 20rpx; }
.lb swiper{width: 100%; height: 100%;}
.swiper-item{width: 100%; height: 100%;}
.swiper-item image{width: 100%; height: 100%; border-radius: 20rpx;}
.category_menu{width: 100%; box-shadow: 0rpx -10rpx 10rpx 0rpx rgba(0,0,0,0.01); background:linear-gradient(to bottom , #ffffff, #f7f7f7); margin-top:-79rpx ; border-top-right-radius: 27rpx; border-top-left-radius: 27rpx;}


/**
 * 修改轮播指示点样式
*/
.shq>>>.uni-swiper__dots-item{border-radius: 0rpx; width: 18rpx; height: 18rpx; border-radius: 18rpx;}
/* .shq>>>.uni-swiper__dots-box{ } */
.category_menu>>>.uni-swiper__dots-long{width: 53rpx;}
.swiper-box{width: 100%; height:394rpx; overflow: hidden; float: left; margin-top: 27rpx;}
.swiper-item2{width: 95%; height: 350rpx; float: left; margin-left:2.5%;}
.slide-text {position: absolute; bottom: 0rpx; height: 8vh; line-height: 11vh; background: linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)); left: 0; right: 0; text-align: left; text-indent: 4%; font-size: 0.7rem; color: rgb(232,232,234); }

.category_item{width: 20%; height: 175rpx; float: left; text-align: center;}
.category_item image{width: 72rpx; height: 72rpx; margin-top: 27rpx; }
.category_item text{width: 100%; float: left; height: 35rpx; line-height: 35rpx; text-align: center; font-size: 25rpx; }

.activity{width: 100%; height: 167rpx; padding-bottom: 20rpx; text-align: center;}
.activity image{width: 95%; height: 100%; border-radius: 79rpx;}
.contentBox{width: 100%; box-shadow: 0px -10rpx 10rpx 0px rgba(0,0,0,0.01); height: auto; float: left; margin-top: 20rpx; background-color: #ffffff; border-top-right-radius: 27rpx; border-top-left-radius: 27rpx;}
.contentBoxfixed{border-radius:0rpx;}
.viewfixed{position: fixed; z-index: 999; top: 105rpx; width: 100%; background-color: #FFF;}
.tabsView{width: 100%; padding: 27rpx 5% 12rpx 5%;}
.content{width: 100%; height: auto; padding-bottom: 86rpx; float: left; z-index: 1;}
.contentFixed0{margin-top: 285rpx;}
.contentFixed1{margin-top: 107rpx;}
.shq>>>.nav{border:none;}
.shq>>>.name{font-size: 25rpx;}

</style>
